<template>
    <el-menu :collapse="collapse" ref="cpMenu" theme="light" width="auto" @select="goTo" :default-active="$route.name">
        <template v-for="item in menuList">
            <el-menu-item v-if="item.children.length<=1 && !item.children[0].hidden" :key="'menuitem' + item.name" :index="item.children[0].name">
                <i :class="item.icon"></i>
                <span slot="title"> {{ item.children[0].title}}
                    <el-badge :value="purchaseCount" v-if="item.children[0].name=='PurchaseList'"></el-badge></span>
            </el-menu-item>
            <el-submenu :index="item.name" v-if="item.children.length > 1  && !item.hidden" :key="item.name">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title"> {{item.title}}
                        <el-badge v-if="item.name=='YhtOrder'" :value="billCount+orderCount"></el-badge></span>
                    <el-badge v-if="item.name=='Purchase'" :value="purchaseCount"></el-badge></span>
                    <el-badge :value="planCount" v-if="item.name=='PlanManage'"></el-badge>
                </template>
                <template v-for="child in item.children">
                    <el-menu-item v-if="!child.hidden" :name="child.name" :index="child.name" :key="'menuitem' + child.name">
                        <span slot="title">{{child.title}}
                            <el-badge :value="orderCount" v-if="child.name=='YhtOrderList'"></el-badge>
                            <el-badge :value="billCount" v-if="child.name=='YhtOrderItemList'"></el-badge>
                            <el-badge :value="purchaseCount" v-if="child.name=='PurchaseItemList'"></el-badge>
                            <el-badge :value="toExeCount+toExeCountStart" v-if="child.name=='PmPlanTaskExeList'"></el-badge>
                            <el-badge :value="toPartCount+toPartCountStart" v-if="child.name=='PmPlanTaskList'"></el-badge>

                            <el-badge :value="myDelayCount" v-if="child.name=='PmPlanTaskDelayMyList'"></el-badge>
                            <el-badge :value="delayCount" v-if="child.name=='PmPlanTaskDelayList'"></el-badge>

                        </span>
                    </el-menu-item>
                </template>
            </el-submenu>
        </template>
    </el-menu>
</template>
<script>
export default {
    name: 'CpMenu',
    data() {
        return {
            billCount: 0,
            purchaseCount: 0,
            orderCount: 0,
            delayCount:0,
            myDelayCount:0,
            planCount: 0,
            toExeCount: 0,
            toPartCount: 0,
            toExeCountStart: 0,
            toPartCountStart: 0
        };
    },
    mounted: function() {


    },
    created: function() {

    },
    methods: {
        goTo: function(active, keyPath) {


            var cpmenu = this.$refs.cpmenu;


            let willpush = true;
            if (this.beforePush !== undefined) {
                if (!this.beforePush(active)) {
                    willpush = false;
                }
            }
            if (willpush) {
                this.$router.push({ name: active }, () => {}, (e) => {

                });
            }
            this.$emit('on-change', active);


        }
    },
    props: {
        collapse: false,
        menuList: {
            type: Array,
            required: true
        },
        beforePush: {
            type: Function
        },
        openNames: {
            type: Array
        }
    },
    updated() {
        this.$nextTick(() => {
            var dt = this.openNames;

            if (this.$refs.cpmenu) {
                // this.$refs.cpmenu.updateOpened();
            }
        });
    }
}
</script>
<style>
</style>